<template>
  <div>
    <div class="table-page-search-wrapper">
      <a-row type="flex" justify="space-between" align="middle">
        <a-col :span="23">
          <a-form layout="inline" :model="listQuery">
            <a-tooltip placement="top">
              <template #title>
                <span>默认仅显示16条数据，可直接输入站点名称进行搜索</span>
              </template>
              <a-form-item label="站点">
                <a-select
                  v-model:value="listQuery.lsi_id"
                  show-search
                  placeholder="请选择(支持搜索)"
                  style="width: 260px"
                  :default-active-first-option="false"
                  :show-arrow="true"
                  :filter-option="false"
                  :not-found-content="null"
                  :options="siteOptions"
                  @search="searchInput"
                />
              </a-form-item>
            </a-tooltip>
            <a-form-item label="日志时间">
              <a-range-picker
                v-model:value="listQuery.send_time_range"
                show-time
                :presets="rangePresets"
                style="width: 370px"
                @ok="onChangeRange"
              />
            </a-form-item>
            <a-form-item label="搜索项">
              <a-tooltip placement="top">
                <template #title>
                  <span>可模糊搜索：{{ searchTitle }}</span>
                </template>
                <a-input
                  v-model:value="listQuery.title"
                  :placeholder="'搜索' + searchTitle"
                  style="width: 230px"
                />
              </a-tooltip>
            </a-form-item>
            <a-form-item label="指定参数">
              <a-tooltip placement="top">
                <template #title>
                  <span>可额外选择任一参数为搜索参数，输入搜索内容后可进一步进行搜索</span>
                </template>
                <a-select
                  v-model:value="listQuery.jq_params"
                  placeholder="（可选）"
                  :options="searchParamsOptions"
                  style="width: 150px"
                />
                <a-input
                  v-model:value="listQuery.jq_title"
                  placeholder="搜索内容"
                  style="width: 200px; margin-left: 8px"
                  :disabled="listQuery.jq_params == undefined || listQuery.jq_params.length == 0"
                />
              </a-tooltip>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" @click="searchSubmit"> 搜索 </a-button>
            </a-form-item>
            <a-form-item>
              <a-button @click="searchReset"> 重置 </a-button>
            </a-form-item>
            <a-form-item>
              <a-button
                v-permission="{ action: 'del_site_log_batch' }"
                type="primary"
                danger
                :disabled="selectedRowKeys.length === 0"
                @click="deleteSelect"
              >
                <template #icon>
                  <DeleteOutlined />
                </template>
                删除所选
              </a-button>
            </a-form-item>
            <a-form-item>
              <a-popconfirm
                title="请确认要删除日志的类型?"
                ok-text="删除所有日志"
                ok-type="danger"
                cancel-text="仅删除日志时间范围内的日志"
                :disabled="dataList['data'] == undefined || dataList['data'].length === 0"
                @confirm="clearAll"
                @cancel="clearBf"
              >
                <a-button
                  v-permission="{ action: 'del_all_site_log' }"
                  danger
                  type="link"
                  :disabled="dataList['data'] == undefined || dataList['data'].length === 0"
                >
                  批量删除
                </a-button>
              </a-popconfirm>
            </a-form-item>
            <a-form-item style="margin-left: -16px">
              <a-tooltip placement="top">
                <template #title>
                  <span
                    >可将当前页数据以时间线格式进行显示，最多允许5个参数，可用于关联(流程)追踪</span
                  >
                </template>
                <a-button
                  type="link"
                  :disabled="dataList['data'] == undefined || dataList['data'].length === 0"
                  @click="timeLine"
                >
                  时间线
                </a-button>
              </a-tooltip>
            </a-form-item>
          </a-form>
        </a-col>
        <a-col :span="1">
          <div style="margin-right: 0px; float: right; display: flex; align-item: center">
            <a-tooltip placement="top">
              <template #title>
                <span>刷新列表</span>
              </template>
              <a-button @click="reloadList">
                <template #icon><SyncOutlined /></template>
              </a-button>
            </a-tooltip>
          </div>
        </a-col>
      </a-row>
    </div>
    <Empty
      v-if="listQuery.lsi_id == '' || listQuery.lsi_id == null"
      style="margin-top: 100px; margin-bottom: 100px"
    >
      <template #description> 请在当前页面左上区选择【站点】 </template>
    </Empty>
    <div v-else>
      <a-spin :spinning="spinning">
        <a-card class="line_css">
          <template #title
            ><a-form layout="inline">
              <a-tooltip placement="top">
                <template #title>
                  <span
                    >本图表会汇总查询时间范围内的所有数据，请勿选择唯一值的参数，数据量过多可能会造成浏览器卡顿！</span
                  >
                </template>
                <a-form-item label="选择参数">
                  <a-select
                    v-model:value="listQuery.lineField"
                    placeholder="请选择"
                    style="width: 200px"
                    :options="lineFields"
                  />
                </a-form-item>
              </a-tooltip> </a-form
          ></template>
          <div class="line_box">
            <div
              id="pie_line"
              :class="listQuery.lineField == null || listQuery.lineField == '' ? ' line_bg ' : ''"
            ></div>
            <div
              id="column_line"
              :class="listQuery.lineField == null || listQuery.lineField == '' ? ' line_bg ' : ''"
            ></div>
            <div
              id="single_line"
              :class="listQuery.lineField == null || listQuery.lineField == '' ? ' line_bg ' : ''"
            ></div>
          </div>
        </a-card>
      </a-spin>
      <a-table
        :columns="columns"
        :rowKey="(record) => record._id"
        :dataSource="dataList['data']"
        :loading="loading"
        :pagination="pagination"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
        @change="handleTableChange"
      >
        <template #action="{ text: record }">
          <a @click="logs_view(record)">详情</a>
          <a-divider v-permission="{ action: 'del_site_log' }" type="vertical" />
          <a
            v-permission="{ action: 'del_site_log' }"
            style="color: red"
            @click="logs_delete(record)"
            ><DeleteOutlined /> 删除</a
          >
        </template>
      </a-table>
    </div>
    <a-drawer
      width="70%"
      title="日志详情"
      placement="right"
      :open="drawerShow"
      @close="
        () => {
          drawerShow = false
        }
      "
    >
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              drawerShow = false
            }
          "
          >关闭</a-button
        >
      </template>
      <a-spin :spinning="spinningView" size="large">
        <a-form :labelCol="labelCol" :wrapperCol="wrapperCol">
          <div v-for="(item, index) in selectData" :key="item._id + item.key">
            <a-form-item :label="item.title">
              <a-popover placement="left">
                <template #content>
                  <span style="cursor: pointer; color: #1890ff" @click="viewHtmls(item)"
                    >在浏览器标签页显示{{ item.juhe == 1 ? '(聚合数据)' : '' }}</span
                  >
                </template>
                <a-tooltip placement="top">
                  <template #title> <span>双击可复制文本框内容</span> </template
                  ><a-textarea
                    :defaultValue="item.value"
                    :auto-size="{ minRows: 2, maxRows: 6 }"
                    readonly
                    :class="item.juhe == 1 ? 'juhe_css' : ''"
                    @dblclick="copyText(item.value)"
                  />
                </a-tooltip>
              </a-popover>
            </a-form-item>
          </div> </a-form
      ></a-spin>
    </a-drawer>
    <a-drawer
      width="85%"
      placement="right"
      :open="timeLineShow"
      @close="
        () => {
          timeLineShow = false
        }
      "
    >
      <template #title>
        <div style="display: flex; flex-direction: row; align-items: center">
          时间线
          <div v-for="(values, index) in lineFieldList" :key="index">
            <label style="margin-left: 10px; font-size: 14px">参数{{ index + 1 }}: </label>
            <a-select
              v-model:value="lineFieldList[index]"
              placeholder="请选择"
              style="width: 100px"
              :options="lineFields"
            />
            <delete-outlined
              style="cursor: pointer; margin-left: 5px; color: red"
              @click="removeLineFieldNo(index)"
            />
          </div>
          <a-tooltip placement="top">
            <template #title>
              <span>增加参数</span>
            </template>
            <plus-circle-outlined
              v-if="lineFieldList.length < 5"
              style="cursor: pointer; margin-left: 10px"
              @click="addLineFieldNo"
            />
          </a-tooltip>
        </div>
      </template>
      <template #extra>
        <a-button
          style="margin-right: 8px"
          @click="
            () => {
              timeLineShow = false
            }
          "
          >关闭</a-button
        >
      </template>
      <a-timeline mode="alternate">
        <a-timeline-item v-for="(item, index) in lineData" :key="index"
          ><template v-if="index == 0" #dot><arrow-up-outlined style="font-size: 16px" /></template>
          <p v-for="(t, i) in item" :key="i">{{ t }}</p></a-timeline-item
        >
      </a-timeline>
      <div id="container" ref="container" style="width: 100%; height: 100vh"></div>
    </a-drawer>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, onMounted, ref, watch } from 'vue'
import {
  Empty,
  RangePicker,
  Modal,
  Select,
  Popover,
  Spin,
  Popconfirm,
  Timeline,
  TimelineItem
} from 'ant-design-vue'
import {
  SyncOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined,
  PlusCircleOutlined,
  DownOutlined,
  ArrowUpOutlined
} from '@ant-design/icons-vue'
import { requestSuccess, requestFailed } from '@/utils/feedback'
import {
  delLogItem,
  getItemList,
  getAllSiteList,
  delLogBatch,
  delLogAll,
  doGetTjData
} from '@/api/logs'
import { useRouter } from 'vue-router'
import { getRangeDateTime, viewHtml, copyText } from '@/utils/common'
import dayjs, { Dayjs } from 'dayjs'
import { Pie, Column, measureTextWidth, Line } from '@antv/g2plot'

export default defineComponent({
  name: 'ExceptionLog',
  components: {
    SyncOutlined,
    PlusOutlined,
    ArrowUpOutlined,
    EditOutlined,
    Empty,
    DownOutlined,
    PlusCircleOutlined,
    DeleteOutlined,
    [Popconfirm.name]: Popconfirm,
    [Timeline.name]: Timeline,
    [TimelineItem.name]: TimelineItem,
    [Select.name]: Select,
    [Spin.name]: Spin,
    [Popover.name]: Popover,
    [RangePicker.name]: RangePicker
  },
  setup() {
    const formRef = ref()
    const router = useRouter()
    const dateFormat = 'YYYY-MM-DD HH:mm:s'
    const state = reactive<any>({
      loading: true,
      lineFieldNo: 1,
      lineFieldList: [null],
      drawerShow: false,
      spinningView: true,
      timeLineShow: false,
      isHandDate: false,
      spinning: true,
      objPie: null,
      singleLine: null,
      objColumn: null,
      rangePresets: [
        { label: '近 7 天', value: [dayjs().add(-7, 'd'), dayjs()] },
        { label: '近 14 天', value: [dayjs().add(-14, 'd'), dayjs()] },
        { label: '近 30 天', value: [dayjs().add(-30, 'd'), dayjs()] },
        { label: '近 90 天', value: [dayjs().add(-90, 'd'), dayjs()] },
        { label: '近 180 天', value: [dayjs().add(-180, 'd'), dayjs()] }
      ],
      dataList: [],
      searchParamsOptions: [],
      searchTitle: '',
      searchText: '',
      siteOptions: [],
      lineFields: [],
      lineData: [],
      lineDataItem: [],
      allServer: {
        options: []
      },
      selectData: [],
      fieldsName: {},
      logViewItem: {},
      browserParams: {},
      selectedRowKeys: [],
      selectedKeysPage: {},
      listQuery: {
        pageNo: 1,
        pageSize: 15,
        lsi_id: null,
        lineField: null,
        send_time_range: [],
        send_time_ranges: [],
        title: ''
      },
      labelCol: {
        xs: { span: 24 },
        sm: { span: 3 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      pagination: {
        pageSizeOptions: ['15', '30', '50'],
        showSizeChanger: true,
        total: 1,
        showTotal: (total) => `共 ${total} 条数据`,
        pageSize: 15
      },
      columns: []
    })
    onMounted(() => {
      getRangeDaySingle('')
      getALLSite()
      getQueryId()
    })
    function getALLSite(site = '') {
      state.siteOptions = []
      getAllSiteList({ title: state.searchText }).then((res) => {
        state.allServer = res
        state.siteOptions = res.list
        if (site && site.length > 3) {
          changeSite(site)
        }
      })
    }
    function searchInput(v) {
      state.searchText = v
      getALLSite()
    }
    function changeSite(site_id) {
      state.listQuery.lsi_id = site_id
      state.columns = state.allServer['columns'][state.listQuery.lsi_id]
      state.searchTitle = state.allServer['searchTitle'][state.listQuery.lsi_id]
      state.fieldsName = state.allServer['fieldsName'][state.listQuery.lsi_id]
      state.browserParams = state.allServer['browserParams'][state.listQuery.lsi_id]
      state.searchParamsOptions = state.allServer['searchParamsOptions'][state.listQuery.lsi_id]
      state.lineFields = []
      state.lineFields = state.allServer['lineFields'][state.listQuery.lsi_id]
      if (state.objPie) {
        state.objPie.destroy()
      }
      if (state.objColumn) {
        state.objColumn.destroy()
      }
      if (state.singleLine) {
        state.singleLine.destroy()
      }
      state.objPie = null
      state.objColumn = null
      state.singleLine = null
      state.listQuery.lineField = null
      reloadList()
      getTjData()
    }
    function getRangeDaySingle(operate) {
      if (!state.isHandDate) {
        let end = ''
        let start = ''
        end = getRangeDateTime(0)
        start = end
        start = getRangeDateTime(-7)
        state.listQuery.send_time_range = ref<[Dayjs, Dayjs]>([
          dayjs(start, dateFormat),
          dayjs(end, dateFormat)
        ])
      }
      if (operate == 'auto') {
        setTimeout(() => {
          getDataList()
        }, 1000)
      } else {
        getDataList()
      }
    }

    function handleTableChange(e) {
      state.loading = true
      state.pagination.pageSize = e.pageSize
      state.listQuery.pageSize = e.pageSize
      state.listQuery.pageNo = e.current
      state.pagination.current = e.current
      getDataList()
    }
    watch(
      () => state.listQuery.lsi_id,
      () => {
        if (state.listQuery.lsi_id != undefined && state.listQuery.lsi_id.length > 0) {
          state.columns = state.allServer['columns'][state.listQuery.lsi_id]
          state.searchTitle = state.allServer['searchTitle'][state.listQuery.lsi_id]
          state.fieldsName = state.allServer['fieldsName'][state.listQuery.lsi_id]
          state.browserParams = state.allServer['browserParams'][state.listQuery.lsi_id]
          state.searchParamsOptions = state.allServer['searchParamsOptions'][state.listQuery.lsi_id]
          state.lineFields = []
          state.lineFields = state.allServer['lineFields'][state.listQuery.lsi_id]
        }
        if (state.objPie) {
          state.objPie.destroy()
        }
        if (state.objColumn) {
          state.objColumn.destroy()
        }
        if (state.singleLine) {
          state.singleLine.destroy()
        }
        state.objPie = null
        state.objColumn = null
        state.singleLine = null
        state.listQuery.lineField = null
        reloadList()
        getTjData()
      }
    )
    watch(
      () => state.listQuery.lineField,
      () => {
        getTjData()
      }
    )

    watch(
      () => state.lineFieldList,
      () => {
        generalLineData()
      },
      { deep: true }
    )

    function getQueryId() {
      setTimeout(() => {
        if (
          router.currentRoute.value.query.site_id != undefined &&
          router.currentRoute.value.query.site_id.length > 0
        ) {
          const site_id = router.currentRoute.value.query.site_id as string
          if (
            state.allServer['columns'] == undefined ||
            state.allServer['columns'][site_id] == undefined
          ) {
            state.searchText = site_id
            getALLSite(site_id)
          } else {
            changeSite(site_id)
          }
        }
      }, 100)
    }
    function reloadList() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getRangeDaySingle('')
    }

    function searchSubmit() {
      state.loading = true
      state.listQuery.pageNo = 1
      state.pagination.current = 1
      getDataList()
      getTjData()
    }
    function searchReset() {
      state.listQuery.lsi_id = null
      state.listQuery.title = null
      state.listQuery.jq_params = null
      state.listQuery.jq_title = null
      state.searchTitle = ''
      state.searchText = ''
      getALLSite()
      getRangeDaySingle('')
    }

    function getDataList() {
      state.listQuery.send_time_ranges[0] = state.listQuery.send_time_range[0].format(dateFormat)
      state.listQuery.send_time_ranges[1] = state.listQuery.send_time_range[1].format(dateFormat)
      getItemList(state.listQuery).then((res) => {
        state.loading = false
        state.dataList = res
        state.pagination.total = res.totalCount
      })
    }
    function renderStatistic(containerWidth, text, style) {
      const textWidth = measureTextWidth(text, style)
      const textHeight = style.lineHeight || style.fontSize
      const R = containerWidth / 2
      // r^2 = (w / 2)^2 + (h - offsetY)^2
      let scale = 1
      if (containerWidth < textWidth) {
        scale = Math.min(
          Math.sqrt(
            Math.abs(Math.pow(R, 2) / (Math.pow(textWidth / 2, 2) + Math.pow(textHeight, 2)))
          ),
          1
        )
      }
      const textStyleStr = `width:${containerWidth}px;`
      return `<div style="${textStyleStr};font-size:${scale}em;line-height:${
        scale < 1 ? 1 : 'inherit'
      };">${text}</div>`
    }
    function getTjData() {
      if (
        state.listQuery.lineField == null ||
        state.listQuery.lineField.length == 0 ||
        state.listQuery.lsi_id == null ||
        state.listQuery.lsi_id.length == 0
      ) {
        state.spinning = false
        return false
      }
      state.spinning = true
      doGetTjData(state.listQuery).then((res) => {
        const data = res.chart2
        const data2 = res.chart
        if (state.objPie != null) {
          state.objPie.update({
            data
          })
        } else {
          state.objPie = new Pie('pie_line', {
            appendPadding: 10,
            data,
            angleField: 'rate',
            colorField: '_id',
            radius: 1,
            innerRadius: 0.64,
            meta: {
              value: {
                formatter: (v) => `${v} %`
              }
            },
            label: {
              type: 'inner',
              offset: '-50%',
              style: {
                textAlign: 'center'
              },
              autoRotate: false,
              content: '{value} %'
            },
            statistic: {
              title: {
                offsetY: -4,
                customHtml: (container, view, datum) => {
                  const { width, height } = container.getBoundingClientRect()
                  const d = Math.sqrt(Math.pow(width / 2, 2) + Math.pow(height / 2, 2))
                  const text = datum ? datum._id : '总计'
                  return renderStatistic(d, text, { fontSize: 28 })
                }
              },
              content: {
                offsetY: 4,
                style: {
                  fontSize: '32px'
                },
                customHtml: (container, view, datum, data) => {
                  const { width } = container.getBoundingClientRect()
                  data = data == undefined ? [] : data
                  const text = datum
                    ? `${datum.rate}%`
                    : `${data.reduce((r, d) => r + d.rate, 0).toFixed(2)}%`
                  return renderStatistic(width, text, { fontSize: 32 })
                }
              }
            },
            // 添加 中心统计文本 交互
            interactions: [
              { type: 'element-selected' },
              { type: 'element-active' },
              { type: 'pie-statistic-active' }
            ]
          })
          state.objPie.render()
        }
        if (state.objColumn != null) {
          state.objColumn.update({
            data
          })
        } else {
          state.objColumn = new Column('column_line', {
            appendPadding: 10,
            data,
            xField: '_id',
            yField: 'count',
            label: {
              position: 'middle', // 'top', 'bottom', 'middle',
              // 配置样式
              style: {
                fill: '#FFFFFF',
                opacity: 0.6
              },
              type: 'spider',
              labelHeight: 28,
              content: '{count}\n{percentage}'
            },
            xAxis: {
              label: {
                autoHide: true,
                autoRotate: false
              }
            }
          })
          state.objColumn.render()
        }
        if (state.singleLine != null) {
          state.singleLine.update({
            data: data2
          })
        } else {
          state.singleLine = new Line('single_line', {
            data: data2,
            xField: 'date',
            smooth: true,
            yField: 'value',
            seriesField: 'category',
            yAxis: {
              label: {
                // 数值格式化为千分位
                formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`)
              }
            }
          })
          state.singleLine.render()
        }
        state.spinning = false
      })
    }
    function viewHtmls(item) {
      if (state.browserParams == undefined || state.browserParams.length == 0) {
        viewHtml(item['value'])
      } else {
        if (
          state.browserParams[item['key']] != undefined &&
          state.browserParams[item['key']].length > 0
        ) {
          var buildHtml = ''
          for (let index = 0; index < state.browserParams[item['key']].length; index++) {
            const element = state.browserParams[item['key']][index]
            if (state.logViewItem[element] != undefined) {
              var title =
                state.fieldsName[element] == null || state.fieldsName[element] == ''
                  ? element
                  : state.fieldsName[element]
              buildHtml =
                buildHtml +
                '<div><h2 style="color: #000;">' +
                title +
                ': ' +
                state.logViewItem[element] +
                '</h2></div>'
            }
          }
          if (buildHtml.length > 0) {
            viewHtml(buildHtml)
          } else {
            viewHtml(item['value'])
          }
        } else {
          viewHtml(item['value'])
        }
      }
    }
    function logs_view(data) {
      state.logViewItem = data
      state.selectData = []
      state.drawerShow = true
      state.spinningView = true
      setTimeout(() => {
        for (let key in data) {
          if (key == '_id') {
            state.selectData[state.selectData.length] = {
              title: 'ID',
              value: data[key] || '',
              juhe:
                state.browserParams != undefined && state.browserParams[key] != undefined ? 1 : 0,
              key: key
            }
          } else if (key == 'remote_ip_area') {
            state.selectData[state.selectData.length] = {
              title: 'IP归属',
              value: data[key] || '',
              juhe:
                state.browserParams != undefined && state.browserParams[key] != undefined ? 1 : 0,
              key: key
            }
          } else {
            if (key != 'lsi_id' && key != 'create_time') {
              var title =
                state.fieldsName[key] == null || state.fieldsName[key] == ''
                  ? key
                  : state.fieldsName[key]
              if (title == key && title == 'remote_ip') {
                title = '来路IP'
              }
              state.selectData[state.selectData.length] = {
                title: title,
                value: data[key] || '',
                juhe:
                  state.browserParams != undefined && state.browserParams[key] != undefined ? 1 : 0,
                key: key
              }
            }
          }
        }
        state.spinningView = false
      }, 500)
    }
    function logs_delete(data) {
      Modal.confirm({
        title: '确认删除此日志?',
        content: '【' + data.request_id + '】',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          delLogItem({ id: data._id }).then((res) => {
            if (res.code === 200) {
              state.loading = true
              getDataList()
              getTjData()
              requestSuccess(res)
            } else {
              requestFailed(res)
            }
          })
        }
      })
    }
    function deleteSelect() {
      Modal.confirm({
        title: '确认批量删除所选日志?',
        okType: 'danger',
        okText: '确认删除',
        onOk() {
          state.loading = true
          delLogBatch({ ids: state.selectedRowKeys })
            .then((res) => {
              if (res.code === 200) {
                state.loading = true
                getDataList()
                getTjData()
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              state.selectedRowKeys = []
            })
        }
      })
    }
    function timeLine() {
      state.timeLineShow = true
      generalLineData()
    }
    function clearAll() {
      Modal.confirm({
        title: '确认删除所有日志?',
        okType: 'danger',
        okText: '确认并立即删除',
        closable: true,
        keyboard: true,
        maskClosable: true,
        onOk() {
          state.listQuery['type'] = 'all'
          state.loading = true
          delLogAll(state.listQuery)
            .then((res) => {
              if (res.code === 200) {
                state.loading = true
                reloadList()
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              getTjData()
              state.selectedRowKeys = []
            })
        }
      })
    }
    function clearBf() {
      Modal.confirm({
        title: '确认清除以下日志时间内的日志?',
        content: state.listQuery.send_time_ranges[0] + '至' + state.listQuery.send_time_ranges[1],
        okType: 'danger',
        okText: '确认并立即清除',
        closable: true,
        keyboard: true,
        maskClosable: true,
        onOk() {
          state.listQuery['type'] = 'time'
          state.loading = true
          delLogAll(state.listQuery)
            .then((res) => {
              if (res.code === 200) {
                state.loading = true
                reloadList()
                requestSuccess(res)
              } else {
                requestFailed(res)
              }
            })
            .finally(() => {
              getTjData()
              state.selectedRowKeys = []
            })
        }
      })
    }
    const onSelectChange = (selectedRowKeys) => {
      state.selectedKeysPage[state.listQuery.pageNo] = selectedRowKeys
      let nowList: any[] = []
      for (const key in state.selectedKeysPage) {
        nowList = nowList.concat(state.selectedKeysPage[key])
      }
      const uniqueList = [...new Set(nowList)]
      state.selectedRowKeys = uniqueList
    }
    function removeLineFieldNo(index) {
      state.lineFieldList.splice(index, 1)
      generalLineData()
    }
    function addLineFieldNo() {
      state.lineFieldList.push(null)
    }
    function generalLineData() {
      state.lineData = []
      for (let i2 = 0; i2 < state.dataList['data'].length; i2++) {
        const e2 = state.dataList['data'][i2]
        state.lineDataItem = []
        for (let i = 0; i < state.lineFieldList.length; i++) {
          const e = state.lineFieldList[i]
          if (e && e != null && e.length > 0 && e2[e] && e2[e] != undefined) {
            state.lineDataItem.push('【' + state.fieldsName[e] + '】' + e2[e])
          }
        }
        if (state.lineDataItem.length > 0) {
          state.lineData.push(state.lineDataItem)
        }
      }
    }
    function onChangeRange() {
      state.isHandDate = true
    }
    return {
      ...toRefs(state),
      addLineFieldNo,
      handleTableChange,
      removeLineFieldNo,
      onChangeRange,
      deleteSelect,
      searchReset,
      clearAll,
      clearBf,
      timeLine,
      onSelectChange,
      logs_view,
      reloadList,
      searchSubmit,
      logs_delete,
      searchInput,
      copyText,
      formRef,
      viewHtmls,
      router,
      getDataList
    }
  }
})
</script>

<style scoped>
.line_box {
  display: flex;
  flex-direction: row;
  height: 320px;
}
.line_box div {
  width: 33.333%;
}
.line_css {
  margin-bottom: 20px;
}
.juhe_css {
  background: url(https://img.alicdn.com/imgextra/i2/573804794/O1CN01z29ctb1lHhdilNx3y_!!573804794.png);
  background-repeat: no-repeat;
  background-size: 36px;
}
</style>
